<template>

	<div class="TpUserNumAdd">
		<div class="TpUserNumAdd-item-box">
			<div class="TpUserNumAdd-item">
				<div class="ti-left">真实姓名</div>
				<div class="ti-right"><input type="text" v-model="checkInName" placeholder="必填，请确保信息真实" /></div>
			</div>
			<div class="TpUserNumAdd-item">
				<div class="ti-left">身份证号码</div>
				<div class="ti-right"><input type="text" v-model="checkInIdCard" placeholder="必填，请确保信息真实" /></div>
			</div>
			<div class="TpUserNumAdd-item">
				<div class="ti-left">手机号码</div>
				<div class="ti-right"><input type="text" v-model="checkInPhone" placeholder="必填，请确保信息真实" /></div>
			</div>
		</div>
		<div class="DelCheckInfo" v-if="sta=='200'" ><div class="DelCheckInfo-btn"  @click="DelCheckInfo"><img class="DelCheckInfo-img" src="../assets/img/garbage.png"/>删除</div></div>
		<div class="TpUserNumAdd-submitbtn" ><button class="TpUserNumAdd-btn" @click="SetCheckInfo">完成</button></div>
	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "TpUserNumAdd",
		data() {
			return {
				sta:'',
				checkInName: '',
				checkInIdCard: '',
				checkInPhone: '',
				checkInId: this.$route.query.checkInId,
				getHiss:JSON.parse(sessionStorage.getItem("userinfo"))
			}
		},
		computed: {
			...mapGetters([
				'source',
				'CheckInList',
				'CheckInfo'
			])
		},
		mounted() {
			this.GetCheckInfo();
		},
		methods: {
			...mapActions({
				getCheckInInfo:'getCheckInInfo'
			}),
			DelCheckInfo(){
				let ajaxSign = {
					source:this.source,// string 是 ios
					token:this.getHiss.token,// string 是 token token
					checkInId:this.checkInId.toString(),// string 是 入住人ID
				}
				let ajaxData = api.getAES(ajaxSign);
				api.DelCheckInfo(ajaxData)
				.then(res=>{
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						if (res.sta==200) {
							this.$router.go(-1)
						}
				})
			},
			GetCheckInfo() {
				let ajaxSign = {
					source:this.source,// string 是 ios
					token:this.getHiss.token,// string 是 token token
					checkInId:this.checkInId.toString(),// string 是 入住人ID
				}
				let ajaxData = api.getAES(ajaxSign);
				api.getCheckInfo(ajaxData)
				.then(res=>{
					this.sta=res.sta;
					this.getCheckInInfo(res.result)
					if(this.sta=='200') {
						document.title = "编辑入住人";
						this.checkInName=this.CheckInfo.checkInName;
						this.checkInIdCard=this.CheckInfo.checkInIdCard;
						this.checkInPhone=this.CheckInfo.checkInPhone;
					}
					if(this.sta=='400'){
						document.title = "添加入住人";
						this.checkInName='';
						this.checkInIdCard='';
						this.checkInPhone='';
					}
				})
			},
			SetCheckInfo() {
				let ajaxSign = {
					source: this.source, // string 是 ios
					token: this.getHiss.token, // string 是 token
					checkInName: this.checkInName, // string 是 入驻人名
					checkInIdCard: this.checkInIdCard, // string 是 入住人身份证
					checkInPhone: this.checkInPhone.toString(), // string 否 入住人手机号
					checkInId:this.checkInId,// string 是 入住人ID
				}
				let ajaxData = api.getAES(ajaxSign);
				api.SetCheckInfo(ajaxData)
					.then(res => {
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						this.$router.go(-1)
					})
			}
		}
	}
</script>

<style>
	.TpUserNumAdd-item {
		display: flex;
		justify-content: space-between;
		padding: .24rem;
		box-sizing: border-box;
		font-size: .28rem;
		color: #282828;
		border-bottom: .01rem solid #EEECEC;
	}
	
	.ti-right input {
		border: none;
		text-align: right;
	}
	
	.TpUserNumAdd-submitbtn {
		width: 100%;
		height: 1.01rem;
		text-align: center;
		line-height: 1.01rem;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.TpUserNumAdd-btn {
		width: 6rem;
		height: .7rem;
		border: none;
		background: #E25051;
		color: #fff;
		font-size: .35rem;
		border-radius: .08rem;
	}
	.DelCheckInfo{
		width: 100%;
		text-align: center;
		font-size: .31rem;
		display: flex;
		justify-content: center;
		background: #f5f5f5;
		padding-top: .2rem;
		box-sizing: border-box;
	}
	.DelCheckInfo-btn{
		display: flex;
	}
	.DelCheckInfo-img{
		display: block;
		width: .35rem;
		height: .35rem;
	}
	::-webkit-input-placeholder {
		font-size: .28rem;
		color: #A4A4A4;
	}
</style>